import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';

import { menuList, findKey } from '../../config/menu-config';

import { Menu } from 'antd';
import logo from '../../assets/images/logo192.jpg';

import './left-nav.css';

const { SubMenu } = Menu;

class leftNav extends Component {
  constructor(props) {
    super(props);
    this.menu = this.getMenuNodes(menuList);
  }

  getMenuNodes = (menuList) => {
    const key = findKey(this.props.location.pathname);
    return menuList.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item icon={item.icon} key={item.key}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        if (!this.onKey) {
          this.onKey = item.children.find((cItem) => cItem.key === key)
            ? item.key
            : null;
        }
        return (
          <SubMenu icon={item.icon} key={item.key} title={item.title}>
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };

  render() {
    const key = findKey(this.props.location.pathname);

    return (
      <div className="left-nav-container">
        <div className="left-nav-header">
          <img className="left-nav-logo" src={logo} alt="" />
          <div className="left-nav-header-text">海星后台</div>
        </div>
        <div className="left-nav-menu">
          <Menu
            onClick={this.handleClick}
            multiple={false}
            theme="dark"
            selectedKeys={[key]}
            defaultOpenKeys={[this.onKey]}
            mode="inline"
          >
            {this.menu}
          </Menu>
        </div>
      </div>
    );
  }
}

export default withRouter(leftNav);
